<template>
  <div>
    <div class="table-container">
      <div class="table-container__top">
        <div class="table-container__top--title">评估流程</div>
      </div>
      <!-- submitProcess 1 选择评估内容  2 确认工作计划 3 签订协议  4 资料填报  5 访谈评估  6 评分结果表 7 查看报告  8 查看评审结果 9 已完成 -->
      <!-- :before-leave="beforeTabLeave" -->
      <el-tabs v-model="activeName" :lazy="true" @tab-click="handleClick">
        <el-tab-pane disabled>
          <template #label>
        <div style="width: 80px;"></div>
        </template>
        </el-tab-pane>
        <!-- :disabled="Number(submitProcess) < 1 " -->
      <el-tab-pane label="确认工作计划" name="1" >
        <template #label>
          <img v-if="Number(submitProcess) > 2"  class="finish" src="@/assets/image/tabs_finish.svg" alt="">
          <span v-else class="number " :class="{ active: activeName === '1'}">1</span>
          <span class="txt">确认工作计划</span>
          <img class="arrow" src="@/assets/image/right.png" alt="">
        </template>
        <div class="assess-container">
          <assessment-first2 v-if="assessDetail && activeName === '1'" :data="assessDetail" @go-next="handleGoNext"></assessment-first2>
        </div>
      </el-tab-pane>
      <div v-if="assessModel != 2 && assessLevel == 0 ">
        <el-tab-pane label="填报资料" name="2" :disabled="Number(submitProcess) < 4 ">
          <template #label>
            <img v-if="Number(submitProcess) > 4"  class="finish" src="@/assets/image/tabs_finish.svg" alt="">
            <span v-else class="number" :class="{ active: activeName === '2' }">2</span>
            <span class="txt">填报资料</span>
            <img class="arrow" src="@/assets/image/right.png" alt="">
          </template>
        <assessment-third v-if="activeName === '2'" :assessId="assessId" :submitProcess="submitProcess"  :approvalStatus="approvalStatus"></assessment-third>
      </el-tab-pane>
        <!-- Number(submitProcess) !== 2 && -->
         <el-tab-pane label="查看访谈评估" name="3" :disabled="Number(submitProcess) < 5 ">
          <template #label>
            <img v-if="Number(submitProcess) > 5"  class="finish" src="@/assets/image/tabs_finish.svg" alt="">
            <span v-else class="number" :class="{ active: activeName === '3' }">3</span>
            <span class="txt">查看访谈评估</span>
            <img class="arrow" src="@/assets/image/right.png" alt="">
          </template>
          <assessment-chat v-if="activeName === '3'"  :assessId="assessId" ></assessment-chat>
        </el-tab-pane>
        <el-tab-pane label="查看评分结果表" name="4" :disabled="Number(submitProcess) < 6 ">
          <template #label>
            <img v-if="Number(submitProcess) > 6"  class="finish" src="@/assets/image/tabs_finish.svg" alt="">
            <span v-else class="number" :class="{ active: activeName === '4' }">4</span>
            <span class="txt">查看评分结果表</span>
            <img class="arrow" src="@/assets/image/right.png" alt="">
          </template>
          <assessment-four v-if="activeName === '4'" :assessId="assessId"></assessment-four>
        </el-tab-pane>
        <el-tab-pane label="查看报告" name="5" :disabled="Number(submitProcess) < 7 ">
          <template #label>
            <img v-if="Number(submitProcess) > 7"  class="finish" src="@/assets/image/tabs_finish.svg" alt="">
            <span v-else class="number" :class="{ active: activeName === '5' }">5</span>
            <span class="txt">查看报告</span>
            <img class="arrow" src="@/assets/image/right.png" alt="">
          </template>
          <assessment-five v-if="activeName === '5'" :assessId="assessId"></assessment-five>
        </el-tab-pane>
        <el-tab-pane label="查看评审结果" name="6" :disabled="Number(submitProcess) < 8 "> 
          <template #label>
            <img v-if="Number(submitProcess) > 8"  class="finish" src="@/assets/image/tabs_finish.svg" alt="">
            <span v-else class="number" :class="{ active: activeName === '6' }">6</span>
            <span class="txt">查看评审结果</span>
            <!-- <img class="arrow" src="@/assets/image/right.png" alt=""> -->
          </template>
          <assessment-six v-if="activeName === '6'" :assessId="assessId"></assessment-six>
        </el-tab-pane>
      </div>
      <div v-else>
        <el-tab-pane label="签订协议" name="2" :disabled="Number(submitProcess) < 3">
        <template #label>
          <img v-if="assessDetail?.agreentmentOne===1"  
          class="finish" src="@/assets/image/tabs_finish.svg" alt="">
          <span v-else class="number" :class="{ active: activeName === '2' }">2</span>
          <span class="txt">签订协议</span>
          <img class="arrow" src="@/assets/image/right.png" alt="">
        </template>
        <div class="control-container">
          <assessment-second v-if="activeName === '2'" :assessId="assessId" 
          :agreentmentOne="assessDetail?.agreentmentOne"
           @go-first="goFirst" @go-third="goThird"></assessment-second>
        </div>
      </el-tab-pane>
      <!-- :disabled="Number(submitProcess) !== 2 && Number(submitProcess) < 3 " -->
      <el-tab-pane label="填报资料" name="3" :disabled="Number(submitProcess) < 4 ">
        <template #label>
          <img v-if="Number(submitProcess) > 4"  class="finish" src="@/assets/image/tabs_finish.svg" alt="">
          <span v-else class="number" :class="{ active: activeName === '3' }">3</span>
          <span class="txt">填报资料</span>
          <img class="arrow" src="@/assets/image/right.png" alt="">
        </template>
        <assessment-third v-if="activeName === '3'" :assessId="assessId" :submitProcess="submitProcess"  :approvalStatus="approvalStatus"></assessment-third>
      </el-tab-pane>
        <el-tab-pane label="查看报告" name="4" :disabled="Number(submitProcess) < 5 ">
          <template #label>
            <img v-if="Number(submitProcess) > 5"  class="finish" src="@/assets/image/tabs_finish.svg" alt="">
            <span v-else class="number" :class="{ active: activeName === '4' }">4</span>
            <span class="txt">查看报告</span>
            <!-- <img class="arrow" src="@/assets/image/right.png" alt=""> -->
          </template>
          <assessment-five v-if="activeName === '4'" :assessId="assessId"></assessment-five>
        </el-tab-pane>
        <el-tab-pane label="查看评审结果" name="5" :disabled="Number(submitProcess) < 8 "> 
          <template #label>
            <img v-if="Number(submitProcess) > 8"  class="finish" src="@/assets/image/tabs_finish.svg" alt="">
            <span v-else class="number" :class="{ active: activeName === '5' }">5</span>
            <span class="txt">查看评审结果</span>
            <!-- <img class="arrow" src="@/assets/image/right.png" alt=""> -->
          </template>
          <assessment-six v-if="activeName === '5'" :assessId="assessId"></assessment-six>
        </el-tab-pane>
      </div>
    </el-tabs>
    </div> 
    <control-dialog :dialog-visible="showControlTx" @close="onClose" @confirm="goConfirm" ></control-dialog>
  </div>
</template>

<script setup>
import ControlDialog from './component/ControlDialog.vue'
import AssessmentFirst2 from './component/AssessmentFirst2.vue'
import AssessmentSecond from './component/AssessmentSecond.vue'
import AssessmentThird from './component/AssessmentThird.vue'
import AssessmentFour from './component/AssessmentFour.vue'
import AssessmentFive from './component/AssessmentFive.vue'
import AssessmentSix from './component/AssessmentSix.vue'
import AssessmentChat from './component/AssessmentChat.vue'
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import { getAssessDetail } from "@/api/sjhg/assess";
import * as Constants from "@/utils/constant";


const route = useRoute()
let assessId = route.query?.id || null
const activeName = ref('1')
// const hasCon = ref(false)
const showControlTx = ref(false)

//0-DCMM 1-DSMM 2-数据合规
let assessModel = route.query?.assessModel || 0
// let 三级  1  四级
let assessLevel = route.query?.assessLevel || 0
//流程
let approvalProcess = route.query?.approvalProcess || 0
let submitProcess = route.query?.submitProcess || 0
let approvalStatus = route.query?.approvalStatus || 0

console.log('assessId===',assessId)
const submitProcessEnum = Constants.submitProcess

// 用户侧评估项目列表
onMounted(() => {
  if(assessId){
    console.log('===onMounted==')
    getDetail();
  }
})

const goConfirm = () => {
  activeName.value = '2'
  showControlTx.value = false;
};
const onClose = () => {
  showControlTx.value = false;
};

const handleClick = (tab, event) => {
  if(activeName.value === '1'){ //选择评估内容
    if(assessId && !assessDetail.value){
      getDetail()
    }
  }
};
//计划确定后 跳转下一步
const handleGoNext = (data) =>{
  assessId = data
  getDetail()
}

//从签署协议回到评估内容  go
// const isGoFirst = ref(false)
const goFirst = () =>{
  // isGoFirst.value = true
  //项目创建后直接跳到协议 协议上一步返回到项目创建  解决不显示填完内容问题
  // if(assessId){ 
  //   getDetail();
  // }
  activeName.value = '1'
}

// const isThirdGo = ref(false)
//从签署协议跳转到填报
const goThird = () =>{
  // console.log('-------goThird--------------')
  if(assessId){ 
    // isThirdGo.value = true
    getDetail();
  }
}

//-------------------------接口--------------------------------------
//项目详情
const assessDetail = ref(null)
const getDetail = () => {
    let params = {}
    params.assessId  = assessId
    getAssessDetail(params)
      .then((res) => {
        if (res.code == 200) {
          assessDetail.value = res.data
          // hasCon.value = true
          submitProcess = assessDetail.value.submitProcess
          approvalProcess = assessDetail.value.approvalProcess
          approvalStatus = assessDetail.value.approvalStatus
          assessModel = assessDetail.value.assessModel
          assessLevel = assessDetail.value.assessLevel
          
          // if(isGoFirst.value){
          //    activeName.value = '1'
          //    isGoFirst.value= false
          // }else{
            changeTab()
          // }
        } 
      })
      .finally(() => {
      });
  }

  //  <!-- submitProcess 1 选择评估内容  2 确认工作计划 3 签订协议  4 资料填报  5 访谈评估  6 评分结果表 7 查看报告  8 查看评审结果 9 已完成 -->
  function changeTab() {
    const processNum = Number(submitProcess);
    if (assessModel != 2 && assessLevel == 0) {
       const mapping = {2: '1', 4: '2', 5:'3', 6: '4', 7: '5',8:'6',9:'1'};
      activeName.value = mapping[processNum] || activeName.value; 
      // activeName.value = processNum === 9 ? '1' : String(processNum);
    } else {
      const mapping = {2: '1',  3: '2', 4: '3',7:'4',8:'5',9:'1'};
      activeName.value = mapping[processNum] || activeName.value; // fallback to current value
    }
    console.log('------activeName.value--------',activeName.value)
}
</script>
<style lang="scss" scoped>
.control-container{
  width: 100%;
}
.assess-container{
  width: 100%;
  // text-align: center;
  display: flex;
  justify-content: center;
}
.txt{
  font-family: PingFang SC-Bold, PingFang SC;
}
.number{
  width: 28px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  background: rgba(242, 243, 245, 1);
  border-radius: 14px;
  color:rgba(78, 89, 105, 1);
  margin-right: 8px;
}
.finish{
  width: 28px;
  height: 28px;
  margin-right: 8px;
}
.arrow{
  width: 16px;
  height: 16px;
  margin-left: 8px;
}
.active{
  background: rgba(22, 93, 255, 1);
  color:var(--font-white);
}
.table-container{
  min-height: calc(100vh - 100px);
  overflow: hidden;
}

.index {
  padding: 0;
  margin-top: 16px;
}

</style>
